<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport">
    <title>聊天室</title>
    <link href="/css/chatMain.css" rel="stylesheet"/>
</head>
<body>
<noscript>
    <h2>Sorry! Your browser doesn't support Javascript</h2>
</noscript>

<div id="username-page">
    <div class="hidden">
        <form id="usernameForm" name="usernameForm">
            <div class="form-group">
                <input autocomplete="off" class="form-control" id="name" placeholder="Username" th:value="${username}"
                       type="text"/>
                <input autocomplete="off" class="form-control" id="topicName" placeholder="Topic Name"
                       th:value="${topicName}"
                       type="text"/>
            </div>
            <div class="form-group">
                <button class="accent username-submit" type="submit">Start</button>
            </div>
        </form>
    </div>
</div>

<div id="chat-page">
    <div class="chat-container">
        <div class="chat-header">
            <h2>聊天室</h2>
        </div>
        <div class="connecting">
            正在连接...
        </div>
        <ul id="messageArea">

        </ul>
        <form id="messageForm" name="messageForm">
            <div class="form-group">
                <div class="input-group clearfix">
                    <input autocomplete="off" class="form-control" id="message" placeholder="输入消息..."
                           type="text"/>
                    <button class="primary" type="submit">发送</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.min.js"></script>
<script src="/js/chatMain.js"></script>
<script>
    connect();
</script>
</body>
</html>